<template>
  <div>
    <el-dialog
      title="分享"
      :visible.sync="dialogVisible"
      width="700px"
      :lock-scroll="false"
    >
      <div style="margin-top: 15px">
        <el-input placeholder="请输入内容" v-model="shareAddr">
          <el-button
            title="点击复制"
            slot="append"
            type="custom"
            icon="el-icon-document-copy"
            @click="handleCopy()"
          ></el-button>
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      shareAddr: "",
    };
  },
  mounted() {
    this.shareAddr = window.location.href;
  },
  methods: {
    handleCopy() {
      this.$copyText(this.shareAddr)
        .then(() => {
          this.$message.success({ message: "已成功复制到剪切板" });
        })
        .catch(() => {
          this.$message.error({ message: "复制失败" });
        });
    },
  },
};
</script>